// 风险承诺

const RiskCommitment = {
    template: '#RiskCommitment',
    components: {
        SelectDate
    },
    props: ['currenType', 'cityName'],
    data() {
        return {
            line1: null,//未承诺趋势分析
            bar1: null,//未承诺分布
            currentDateType: '1',//日月年1 2 3趋势分析
            currentDateType2: '1',//日月年1 2 3预警处理响应时间分析
            currentDateType3: '1',//日月年1 2 3预警分布
            commitmentCount: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getCount()
            this.setLine1()
            this.setLine3()
        },
        handleChangeDate(type) {//承诺统计
            this.currentDateType = type
            this.getCount()

        },
        handleChangeDate2(type) {//未承诺趋势分析
            this.currentDateType2 = type
            this.setLine1()

        },
        handleChangeDate3(type) {//未承诺分布
            this.currentDateType3 = type
            this.setLine3()

        },
        getCount() {
            service.get('/mock.json', {
                params: {
                    type: this.currentDateType,
                    currenType: this.currenType,
                    cityName: this.cityName

                }
            }).then(res => {
                if (res.status === 200) {
                    // let { data } = res
                    this.commitmentCount = [
                        {
                            name: '已承诺',
                            value: Math.floor(Math.random() * 100)
                        },
                        {
                            name: '未承诺',
                            value: Math.floor(Math.random() * 100)
                        }, {
                            name: '承诺率',
                            value: Math.floor(Math.random() * 100) + '%'
                        }
                    ]
                }
            })
        },
        setLine1() {
            service.get('/mock.json', {
                params: {
                    type: this.currentDateType,
                    currenType: this.currenType,
                    cityName: this.cityName

                }
            }).then(res => {
                if (res.status === 200) {
                    // let { data } = res
                    let xData = ["1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月",
                        "1月", "1月", "1月"
                    ]
                    let data = [
                        { name: '红色预警', value: [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32] },
                    ]
                    let serList = data.map(item => {

                        return (
                            {
                                areaStyle: {},
                                type: "line",
                                data: item.value
                            }
                        )
                    })
                    this.line1 = echarts.init(document.getElementById('fxcn-line1'));
                    let option = allEchartsOption.fxcnline1;
                    option.xAxis.data = xData
                    option.series = serList

                    this.line1.setOption(option)
                }
            })
        },
        setLine3() {
            service.get('/mock.json', {
                params: {
                    type: this.currentDateType3,
                    currenType: this.currenType,
                    cityName: this.cityName

                }
            }).then(res => {
                if (res.status === 200) {
                    // let { data } = res
                    let xData = ["1月", "城市1", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月", "1月",
                        "城市1", "1月", "1月"
                    ]
                    let data = [
                        { name: '未承诺分布', value: [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 301, 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32] },
                    ]
                    let serList = data.map(item => {
                        return (
                            {
                                itemStyle: { barBorderRadius: 4 },
                                name: item.name,
                                type: "bar",
                                data: item.value
                            }
                        )
                    })
                    this.bar1 = echarts.init(document.getElementById('fxcn-bar1'));
                    let option = allEchartsOption.fxcnBar;
                    option.xAxis.data = xData
                    option.series = serList
                    this.bar1.setOption(option)
                }
            })
        }
    },
    watch: {
        currenType(newValue, oldValue) {
            // 类型改变后一系列动作
            this.init()
        },
        cityName(newValue, oldValue) {
            // 城市改变后一系列动作
            this.init()
        }
    }
}